<template>
  <view class="list-container">
    <!-- 搜索栏 -->
    <view class="search-bar">
      <view class="search-input">
        <text class="iconfont icon-search">🔍</text>
        <input
          type="text"
          v-model="searchKeyword"
          placeholder="输入题目关键词进行搜索"
          @input="handleSearch"
        />
      </view>
    </view>

    <refresh-list
      ref="refreshList"
      :useRequestEvent="true"
      :pageNum="1"
      :pageSize="20"
      :maxPage="5"
      @request="dataRequest"
      @data-change="dataChange"
    >
      <template v-slot:list="{ dataList }">
        <view
          v-for="(item, index) in dataList"
          :key="index"
          class="question-item"
        >
          <view class="question-content">
            <text class="question-title">{{ item.question }}</text>
            <view class="answer-section">
              <text class="answer-label">答案：</text>
              <text class="answer-content">{{ item.answer }}</text>
            </view>
          </view>
        </view>
      </template>
    </refresh-list>
  </view>
</template>

<script>
import RefreshList from "@/components/common/RefreshList.vue";

export default {
  components: {
    RefreshList,
  },
  data() {
    return {
      searchKeyword: "",
      timer: null,
    };
  },
  methods: {
    // 处理搜索
    handleSearch() {
      if (this.timer) {
        clearTimeout(this.timer);
      }

      this.timer = setTimeout(() => {
        // 触发刷新组件重新加载
        this.$refs.refreshList.reload();
      }, 500);
    },

    // 请求事件通知（用于日志和UI状态）
    dataRequest(params, callback) {
      console.log("请求开始:", params);

      this.requestData(params)
        .then((result) => {
          // 通过回调返回结果
          callback && callback(result);
        })
        .catch((err) => {
          console.error("请求处理失败:", err);
          callback && callback([]);
        });
    },

    // 处理请求事件 - 确保返回requestData数组
    async requestData(params) {
      const { currPage, pageSize, isRefresh, isFirstPage, loadingType } =
        params;

      let requestData = [];

      try {
        // 构建业务接口请求参数
        const apiParams = {
          question: this.searchKeyword || "军团",
        };

        console.log(
          `正在${
            loadingType === "refresh" ? "刷新" : "加载更多"
          }数据，页码: ${currPage}`
        );

        // 处理接口请求逻辑
        const res = await this.$http({
          method: "POST",
          url: "https://api.qqsgtk.cn/qqsgtkApi/findByQuestion",
          contentType: "application/json",
          data: apiParams,
        });

        if (res.code == 200) {
          // 数据处理逻辑
          requestData = res.data || [];
          console.log("数据已更新, 本次获取", requestData.length, "条");
        } else {
          console.error("加载题目失败:", res);
        }
      } catch (err) {
        console.error("接口请求失败:", err);
      }

      // 返回数据数组
      return requestData;
    },

    // 处理数据变化事件
    dataChange(data) {
      console.log("数据已更新, 共", data.length, "条");
    },
  },
  beforeDestroy() {
    if (this.timer) {
      clearTimeout(this.timer);
      this.timer = null;
    }
  },
};
</script>

<style lang="scss" scoped>
/* 容器样式 */
.list-container {
  height: 100vh;
  background-color: #f5f5f5;
  position: relative;
  padding-top: 75px;
}

/* 搜索栏样式 */
.search-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  padding: 24rpx;
  background-color: #fff;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
}

.search-input {
  display: flex;
  align-items: center;
  background-color: #f5f5f5;
  border-radius: 8rpx;
  padding: 16rpx 24rpx;
}

.icon-search {
  margin-right: 16rpx;
  color: #999;
}

input {
  flex: 1;
  height: 44rpx;
  font-size: 28rpx;
}

/* 列表项样式 */
.question-item {
  background-color: #fff;
  border-radius: 12rpx;
  margin: 0 24rpx 24rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
  overflow: hidden;
}

.question-content {
  padding: 24rpx;
}

.question-title {
  font-size: 28rpx;
  color: #333;
  line-height: 1.6;
  margin-bottom: 16rpx;
}

.answer-section {
  background-color: #f8f8f8;
  padding: 16rpx 20rpx;
  border-radius: 8rpx;
}

.answer-label {
  font-size: 26rpx;
  color: #666;
  margin-right: 8rpx;
}

.answer-content {
  font-size: 26rpx;
  color: #333;
  line-height: 1.6;
}
</style>
